<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/admin/bootstrap/bootstrap3/swatch/default/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="/static/admin/bootstrap/bootstrap3/css/bootstrap-theme.min.css?v=3.3.5" rel="stylesheet">
    <link href="/static/admin/admin/css/bootstrap3/admin.css?v=1.1.1" rel="stylesheet">
    <link href="/static/admin/vendor/select2/select2.css?v=3.5.2" rel="stylesheet">
  <link href="/static/admin/vendor/select2/select2-bootstrap3.css?v=1.4.6" rel="stylesheet">
  <link href="/static/admin/vendor/bootstrap-daterangepicker/daterangepicker-bs3.css?v=1.3.22" rel="stylesheet">
  <link href="/static/admin/vendor/x-editable/css/bootstrap3-editable.css?v=1.5.1.1" rel="stylesheet">
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #ddd;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }
    .chart {
        height: 350px;
        /*width: 80%;*/
    }
</style>
<div>
    <input type="hidden" id="log_id" value="{{ mid }}">
    <div align="center">
        <form class="form-inline">
          <div class="form-group">
            <label>十分钟间隔流量图</label>
            <input type="text" class="form-control" data-type="minute" id="inp_ten_minuter" placeholder=" - ">
          </div>
        </form>
        <div class="chart" id="ten_minuter"></div>
    </div>
    <div align="center">
        <form class="form-inline">
          <div class="form-group">
            <label>小时间隔流量图</label>
            <input type="text" class="form-control" data-type="hour" id="inp_hour_chart" placeholder=" - ">
          </div>
        </form>
        <div class="chart" id="hour_chart"></div>
    </div>
    <div align="center">
        <form class="form-inline">
          <div class="form-group">
            <label>日间隔流量图</label>
            <input type="text" class="form-control" data-type="day" id="inp_day_chart" placeholder=" - ">
          </div>
        </form>
        <div class="chart" id="day_chart"></div>
    </div>
    <div align="center">
        <form class="form-inline">
          <div class="form-group">
            <label>月间隔流量图</label>
            <input type="text" class="form-control" data-type="month" id="inp_month_chart" placeholder=" - ">
          </div>
        </form>
        <div class="chart" id="month_chart"></div>
    </div>
</div>
<script src="/static/admin/vendor/jquery.min.js?v=3.3.1" type="text/javascript"></script>
<script src="/static/admin/bootstrap/bootstrap3/js/bootstrap.min.js?v=3.3.5" type="text/javascript"></script>
<script src="/static/admin/vendor/moment.min.js?v=2.22.2" type="text/javascript"></script>
<script src="/static/admin/vendor/select2/select2.min.js?v=3.5.2" type="text/javascript"></script>
<script src="/static/layer/layer.js?date=7.4.2"></script>
<script src="/static/laydate/laydate.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="/static/admin/vendor/bootstrap-daterangepicker/daterangepicker.js?v=1.3.22"></script>
<script src="/static/admin/vendor/x-editable/js/bootstrap3-editable.min.js?v=1.5.1.1"></script>
<script src="/static/admin/admin/js/form.js?v=1.0.1"></script>
<script>
laydate.render({
    elem: '#inp_ten_minuter',
    range: true,
    value:'{{ minute }}',
    done:function(value, date, endDate){load_rtx('minute', value);},
});
    laydate.render({
  elem: '#inp_hour_chart'
  ,range: true,
        value:'{{ hour }}',
        done:function(value, date, endDate){load_rtx('hour', value);},
});
    laydate.render({
  elem: '#inp_day_chart'
  ,range: true,
        value:'{{ day }}',
        done:function(value, date, endDate){load_rtx('day', value);},
});
laydate.render({
  elem: '#inp_month_chart'
  ,type: 'month'
  ,range: true,
    value:'{{ month }}',
    done:function(value, date, endDate){load_rtx('month', value);},
});
// ten_minuter hour_chart day_chart month_chart
var c_ten_minuter = echarts.init(document.getElementById('ten_minuter'));
var c_hour_chart = echarts.init(document.getElementById('hour_chart'));
var c_day_chart = echarts.init(document.getElementById('day_chart'));
var c_month_chart = echarts.init(document.getElementById('month_chart'));

var option={tooltip:{trigger: 'axis',axisPointer : {type : 'cross'},},legend:{},xAxis:{boundaryGap:false,data:[]},yAxis:{},
    series:[{name:'上行流量',type:'line', smooth:true, lineStyle: { width:0}, showSymbol:false,
        areaStyle: {
            color:'#4682B4',
            opacity:0.6,
            origin:'start',
        },data:[]
    },
        {name:'下行流量',type:'line',
        smooth:true,
            lineStyle: { width:0},
            showSymbol:false,
            //stack: 'KB',
        areaStyle: {
                color:'#1E90FF',
                opacity:0.6,
                origin:'start',
            },data:[]
    },
    ]};
c_ten_minuter.setOption(option);
c_hour_chart.setOption(option);
c_day_chart.setOption(option);
c_month_chart.setOption(option);
function load_rtx(chart_type, range_val){
    $.get('{{ url_for('.get_flow_graph') }}',{id:$('#log_id').val(),type:chart_type,date_range:range_val},function(data){
        x_data= [];
        r_data = [];
        t_data = [];
        for(var i=0;i<data.data.length;i++){
            t_data.push(data.data[i][0]);
            r_data.push(data.data[i][1]);
            x_data.push(data.data[i][2]);
        }
        dt = {
                yAxis:{name:'单位:'+data.dw},
                xAxis: {
                    data: x_data
                },
                series: [{
                    name: '上行流量',
                    data: t_data
                },{
                    name: '下行流量',
                    data: r_data
                },
                ]
            }
        switch (chart_type) {
            case 'minute':
                c_ten_minuter.setOption(dt);
                break;
            case 'hour':
                c_hour_chart.setOption(dt);
                break;
            case 'day':
                c_day_chart.setOption(dt);
                break;
            case 'month':
                c_month_chart.setOption(dt);
                break;
        }
    });
}
$(document).ready(function(){
  load_rtx('minute',$('#inp_ten_minuter').val());
  load_rtx('hour',$('#inp_hour_chart').val());
  load_rtx('day',$('#inp_day_chart').val());
  load_rtx('month',$('#inp_month_chart').val());
});
</script>
</body>
</html>